<template>
  <div v-loading="loading">
    <div v-if="isIE">
      <div v-if="!hasPlugin">
        <div class="video-alert">
          <p class="video-alert--title">视频需要插件播放</p>
          <div class="mb-5">
            <span class="mr-3">请先安装插件后播放视频</span>
            <a :href="pluginUrl" download>点击下载插件</a>
          </div>

          <p>备注：</p>
          <ul class="list-unstyled">
            <li>1、下载完成后，解压安装；</li>
            <li>
              2、安装过程中，务必勾选
              <span class="text-info">ActiveX 插件</span>
              ；
            </li>
            <li>3、安装完成后，请刷新浏览器再播放。</li>
          </ul>
        </div>
      </div>
      <object
        type="application/x-vlc-plugin"
        id="vlc"
        events="True"
        classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
        width="720"
        height="540"
      >
        <param name="volume" value="50" />
        <param name="autoplay" value="true" />
        <param name="loop" value="false" />
        <param name="fullscreen" value="false" />
      </object>
    </div>

    <div v-else>
      <el-alert title="视频需要插件播放" type="warning" show-icon :closable="false">
        浏览器不支持，请用IE浏览器打开
      </el-alert>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    deviceId: String,
  },
  data() {
    return {
      loading: false,
      hasPlugin: false,
      pluginCab: 'https://vimi8.oss-cn-shenzhen.aliyuncs.com/webplugins/axvlc.cab',
      pluginUrl: 'https://vimi8.oss-cn-shenzhen.aliyuncs.com/webplugins/vlc-1.0.5-win32.zip',
    }
  },
  computed: {
    isIE() {
      const userAgent = navigator.userAgent
      return (
        (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1) ||
        (userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1)
      )
    },
  },
  watch: {
    deviceId: {
      handler: function () {
        this.getVideoPlayUrl()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getVideoPlayUrl() {
      if (!this.isIE || !this.deviceId) return

      this.loading = true
      this.$http
        .get(`/iot-proxy/live?cameraId=${this.deviceId}`)
        .then(res => {
          const { resultCode, resultDesc, url } = res?.data ?? {}
          if (resultCode !== 0) {
            return this.$message.error(resultDesc || '获取视频播放地址失败')
          }
          this.$nextTick(() => this.play(url))
        })
        .finally(() => {
          this.loading = false
        })
    },
    play(videoUrl) {
      const vlc = document.getElementById('vlc')
      if (!vlc || !vlc.playlist) {
        this.hasPlugin = false
        return
      }
      this.hasPlugin = true
      const id = vlc.playlist.add(videoUrl, 'fancy name', ':rtsp-tcp')
      vlc.playlist.playItem(id)
    },
  },
}
</script>

<style lang="scss" scoped>
.video-alert {
  padding: 1rem;
  background-color: #fffbf5;
  color: #e6a23c;
  border-radius: 4px;
  &--title {
    font-weight: bold;
  }
}
</style>
